<template>
	<view class="goods-search">
		<view class="head-tools-fixed"><search :value.sync="searchText" @searchStart="onBtnSearchStart" @onKeyWordSelect="onBtnSearchStart"></search></view>
		<container
			:isNoData="isNodata"
			:isLoading="loading"
			:nodata-option="{
				type: 'nobtn',
				icon: '/static/search-no-result.png',
				iconW: 540,
				iconH: 452,
				iconBottom: '80rpx',
				text: '<p>没有找到匹配的结果</p><p>建议您修改关键词重新搜索</p>'
			}"
		>
			<mescroll-body
				ref="mescrollRef"
				@init="mescrollInit"
				:down="{
					auto: false
				}"
				:up="{
					auto: false,
					textNoMore: '没有更多'
				}"
				@down="downLoad"
				@up="upLoad"
			>
				<view class="good-list">
					<navigator
						class="item"
						:url="'/pages/goods/good-detail?id=' + item.commodityId + '&name=' + item.commodityName"
						hover-class="none"
						:key="item.categoryId"
						v-for="(item, index) in goodList"
					>
						<goods-item
							:name-size="28"
							:img="imgHost + item.commodityPic"
							:img-height="'400rpx'"
							:price="item.sellPrice"
							:orgprice="item.marketPrice"
							:name="item.commodityName"
						></goods-item>
					</navigator>
				</view>
			</mescroll-body>
		</container>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import search from '@/components/search/search.vue';
import goodsItem from '../../components/goods-item/goods-item.vue';
export default {
	mixins: [MescrollMixin],
	components: {
		search,
		goodsItem
	},
	data() {
		return {
			loading: false,
			imgHost: this.$imgHost,
			searchText: '', //搜索文本
			pageNum: 1, //当前页码
			pageSize: 10, //每页数量
			total: null, //总数
			goodList: [
				// {
				// 	author: "十万个为什么 上册"
				// 	categoryId: 19
				// 	categoryName: "精品教材"
				// 	commodityCode: "100100100"
				// 	commodityId: 8
				// 	commodityName: "十万个为什么 上册"
				// 	commodityPic: "/profile/upload/afb37c4f-68ae-4411-9c47-b47a5353aa4d.jpg"
				// 	commodityRotationPic: "/profile/upload/eb0964ac-bb95-4439-8555-be233b96e3d6.jpg,/profile/upload/8600a944-2745-484f-82e8-5f99d2f98c62.jpg"
				// 	createTime: "2021-01-08 07:23:40"
				// 	cumulativeSales: null
				// 	freeMailStatus: 0
				// 	marketPrice: 100
				// 	orderNum: 0
				// 	postage: null
				// 	press: "十万个为什么 上册"
				// 	pressDate: "2021-01-12"
				// 	sellPrice: 100
				// 	status: 1
				// 	stock: 100
				// 	thirtyDayCumulativeSales: null
				// }
			]
		};
	},
	computed: {
		isNodata() {
			return this.goodList.length < 1;
		}
	},
	watch: {
		searchText: function(newVal, oldVal) {
			// 无搜索文字清空
			if (!newVal || newVal == '') this.goodList = [];
		}
	},
	methods: {
		init() {
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量
			// this.loading = true;
			this.getSearchHistroy().then(res => {
				// this.loading = false;
			});
		},
		downLoad() {
			// 下拉刷新
			console.log('下拉刷新');
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量
			this.mescroll.resetUpScroll();
			this.searchStart()
				.then(res => {
					// this.mescroll.endSuccess();
				})
				.catch(err => {
					// this.mescroll.endErr();
				});
		},
		upLoad() {
			// 上拉加载
			console.log('上拉加载');

			this.pageNum++;
			this.searchStart()
				.then(res => {
					// this.mescroll.endSuccess();
				})
				.catch(err => {
					// this.mescroll.endErr();
				});
		},
		getSearchHistroy() {
			return this.$store.dispatch('getSearchHistroy').then(res => {
				console.log('搜索历史获取成功', res);
			});
		},
		onBtnSearchStart() {
			if (this.searchText && this.searchText != '') {
				this.pageNum = 1; //页码
				this.pageSize = 10; //每页数量
				if(this.mescroll&&this.mescroll.resetUpScroll)
				this.mescroll.resetUpScroll();
				this.loading = true;
				this.searchStart()
					.then(res => {
						this.loading = false;
					})
					.catch(err => {
						this.loading = false;
					});
			} else {
				uni.showToast({
					icon: 'none',
					mask: true,
					title: '请填写搜索关键字！',
					duration: 2000
				});
			}
		},

		searchStart() {
			// 搜索开始
			return new Promise((resolve, reject) => {
				// let option = {};
				// if (this.searchText && this.searchText != '') option.searchValue = this.searchText;
				if (this.searchText && this.searchText != '') {
					// this.loading = true;
					this.$store
						.dispatch('searchGoodList', {
							searchValue: this.searchText,
							pageNum: this.pageNum, //页码
							pageSize: this.pageSize //每页数量
						})
						.then(res => {
							// this.loading = false;
							console.log('搜索成功', res);
							let data = res.data;
							this.total = data.total;
							if (this.pageNum == 1) this.goodList = data.rows;
							else this.goodList = [...this.goodList, ...data.rows];

							if (this.total != null && this.pageNum * this.pageSize < this.total) {
								console.log('加载');
								this.mescroll.endSuccess(data.rows.length, true);
							} else {
								console.log('不加载', data.rows.length);
								this.mescroll.endSuccess(data.rows.length, false);
							}
							resolve(res);
						})
						.catch(err => {
							this.mescroll.endErr();
							reject(err);
						});
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '请填写搜索关键字！',
						duration: 2000
					});
					reject('请填写搜索关键字');
				}
			});
		},
		clearHistroy() {
			// 清除搜索记录
			this.$store.dispatch('clearHistroy').then(res => {
				console.log('清除搜索记录成功', res);
			});
		}
	},
	onLoad() {
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.goods-search {
	width: 100%;
	height: 100%;
	// flex: 1;
	box-sizing: border-box;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	padding-top: 112rpx;
	.head-tools-fixed {
		width: 100%;
		box-sizing: border-box;
		padding: 22rpx 20rpx;
		background-color: #fff;
		position: fixed;
		z-index: 888;
		box-shadow: 0px 0px 20rpx #000000;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifdef MP */
		top: 0px;
		/* #endif */
	}

	.good-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		.item {
			width: 48%;
		}
	}
}
</style>
<style>
/* 修改最外层容器样式 */
/* #ifdef H5 */
.uni-body {
	background-color: #fff;
}

/* #endif */

/* #ifdef MP */
page {
	background-color: #fff;
}
/* #endif */
</style>
